<template>
  <div class="in-float-input" :style="style" v-if="props.show">
    <input
      v-focus
      :value="props.value"
      class="w-100 h-100"
      @keydown.enter="comfirm"
      @blur="comfirm"
      ref="input"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
const props = defineProps({
  /* 目标html节点 */
  node: {
    type: HTMLElement
  },
  show: {
    type: Boolean
  },
  value: {
    type: [String, Number]
  }
});

const emits = defineEmits(["update:show", "onChange"]);

const input =ref()
const comfirm = () => {
  var el = input.value as HTMLInputElement
  emits("update:show",false);
  emits("onChange",el.value);
};

const style = computed(() => {
  if (!props.node) return;
  var { width, height, top, left } = props.node?.getBoundingClientRect();
  return {
    width: width + "px",
    height: height + "px",
    top: top + "px",
    left: left + "px"
  };
});
</script>

<style lang="scss" scoped>
.in-float-input {
  position: fixed;
  background-color: #444;

  input {
    text-align: center;
    font-size: 12px;
  }
}
</style>
